<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <title>角色管理系统</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    body {
      font-family: "Segoe UI", sans-serif;
      background-color: #f4f6f9;
      min-height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 40px;
    }

    .container {
      width: 100%;
      max-width: 800px;
      background-color: #fff;
      padding: 30px;
      border-radius: 10px;
      box-shadow: 0 4px 15px rgba(0,0,0,0.1);
      display: flex;
      flex-direction: column;
      gap: 30px;
    }

    h2, h3 {
      color: #333;
      text-align: center;
    }

    .form-container {
      background-color: #f9f9f9;
      padding: 20px;
      border-radius: 8px;
      box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    }

    .form-container input {
      width: 100%;
      padding: 10px;
      margin: 10px 0;
      border: 1px solid #ccc;
      border-radius: 4px;
    }

    .form-container label {
      font-weight: bold;
      display: block;
      margin-top: 10px;
    }

    .form-container button {
      margin-top: 20px;
      padding: 10px 20px;
      font-size: 16px;
      cursor: pointer;
      border: none;
      border-radius: 4px;
      background-color: #28a745;
      color: white;
    }

    .form-container button:hover {
      background-color: #218838;
    }

    table {
      width: 100%;
      border-collapse: collapse;
      border-radius: 8px;
      overflow: hidden;
      box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    }

    th, td {
      text-align: left;
      padding: 12px;
      border-bottom: 1px solid #ddd;
    }

    th {
      background-color: #007bff;
      color: white;
    }

    tr:hover {
      background-color: #f1f1f1;
    }

    .action-buttons button {
      margin-right: 5px;
      padding: 6px 10px;
      font-size: 14px;
      border-radius: 4px;
      border: none;
      cursor: pointer;
    }

    .edit-btn {
      background-color: #ffc107;
      color: black;
    }

    .delete-btn {
      background-color: #dc3545;
      color: white;
    }
  </style>
</head>
<body>

<div class="container">

  <!-- 角色列表 -->
  <div>
    <h3>👤 角色列表</h3>
    <table id="roleTable">
      <thead>
      <tr>
        <th>角色ID</th>
        <th>角色名称</th>
        <th>描述</th>
        <th>操作</th>
      </tr>
      </thead>
      <tbody></tbody>
    </table>
  </div>

  <!-- 表单区域 -->
  <div class="form-container">
    <input type="hidden" id="roleId">
    <label for="roleName">角色名称：</label>
    <input type="text" id="roleName" required>

    <label for="description">描述：</label>
    <input type="text" id="description">

    <button onclick="saveRole()">保存角色</button>
    <button onclick="clearForm()">清空表单</button>
  </div>

</div>

<script>
  $(document).ready(function () {
    loadRoles();
  });

  function loadRoles() {
    $.ajax({
      url: "/api/roles",
      method: "GET",
      success: function (data) {
        var tbody = $("#roleTable tbody");
        tbody.empty();
        data.forEach(function (r) {
          tbody.append(`
                    <tr>
                        <td>${r.roleId}</td>
                        <td>${r.roleName}</td>
                        <td>${r.description || '无'}</td>
                        <td class="action-buttons">
                            <button class="edit-btn" onclick='editRole(${JSON.stringify(r)})'>编辑</button>
                            <button class="delete-btn" onclick='deleteRole(${r.roleId})'>删除</button>
                        </td>
                    </tr>
                `);
        });
      }
    });
  }

  function saveRole() {
    var role = {
      roleId: $("#roleId").val(),
      roleName: $("#roleName").val(),
      description: $("#description").val()
    };

    var url = "/api/roles";
    var method = role.roleId ? "PUT" : "POST";

    if (role.roleId) {
      url += "/" + role.roleId;
    }

    $.ajax({
      url: url,
      method: method,
      contentType: "application/json",
      data: JSON.stringify(role),
      success: function () {
        loadRoles();
        clearForm();
      }
    });
  }

  function editRole(role) {
    $("#roleId").val(role.roleId);
    $("#roleName").val(role.roleName);
    $("#description").val(role.description);
  }

  function deleteRole(id) {
    if (confirm("确定要删除吗？")) {
      $.ajax({
        url: "/api/roles/" + id,
        method: "DELETE",
        success: function () {
          loadRoles();
        }
      });
    }
  }

  function clearForm() {
    $("#roleId").val("");
    $("#roleName").val("");
    $("#description").val("");
  }
</script>

</body>
</html>